<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<meta name="description" content="Everest Admin Panel" />
		<meta name="keywords" content="Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap" />
		<meta name="author" content="Bootstrap Gallery" />
		<link rel="shortcut icon" href="img/favicon.ico">
		<title>sugonTravle</title>
		
		<!-- Bootstrap CSS -->
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">

		<!-- Animate CSS -->
		<link href="css/animate.css" rel="stylesheet" media="screen">

		<!-- Alertify CSS -->
		<link href="css/alertify/alertify.core.css" rel="stylesheet">
		<link href="css/alertify/alertify.default.css" rel="stylesheet">

		<!-- Main CSS -->
		<link href="css/main.css" rel="stylesheet" media="screen">

		<!-- Font Awesome -->
        <link href="fonts/font-awesome.min.css" rel="stylesheet">
        

		<link href="css/jquery.dataTables.min.css" rel="stylesheet">

		<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="js/html5shiv.js"></script>
			<script src="js/respond.min.js"></script>
        <![endif]-->
        
        <style>
            .table>tbody>tr>td{
                text-align:center;
            }
            .table>thead>tr>th{
                text-align:center;
            }
        </style>

	</head>  

	<body>

		<!-- Header Start -->
		<header>

			<!-- Logo starts -->
			<div class="logo">
				<a href="#">
					<img src="img/logo.png" alt="logo">
					<span class="menu-toggle hidden-xs">
						<i class="fa fa-bars"></i>
					</span>
				</a>
			</div>
			<!-- Logo ends -->

			<!-- Custom Search Starts -->
			<div class="custom-search pull-left hidden-xs hidden-sm">
				<input type="text" class="search-query" placeholder="Search here">
				<i class="fa fa-search"></i>
			</div>
			<!-- Custom Search Ends -->

			<!-- Mini right nav starts -->
			<div class="pull-right">
				<ul id="mini-nav" class="clearfix">
					<li class="list-box hidden-lg hidden-md hidden-sm" id="mob-nav">
						<a href="#">
							<i class="fa fa-reorder"></i>
						</a>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop7" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-image"></i>
						</a>
						<span class="info-label info-bg animated rubberBand">7+</span>
						<ul class="blog-gallery dropdown-menu fadeInDown animated clearfix recent-tweets">
							<li>
								<img src="img/user1.jpg" alt="User">
							</li>
							<li>
								<img src="img/user2.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user4.jpg" alt="User">
							</li>
							<li>
								<img src="img/user5.jpg" alt="User">
							</li>
							<li>
								<img src="img/user6.jpg" alt="User">
							</li>
							<li>
								<img src="img/user7.jpg" alt="User">
							</li>
							<li>
								<img src="img/user8.jpg" alt="User">
							</li>
							<li>
								<img src="img/user9.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
								
							</li>
						</ul>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop5" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-th"></i>
						</a>
						<span class="info-label success-bg animated rubberBand">6</span>
						<ul class="dropdown-menu fadeInDown animated quick-actions">
							<li class="plain">Recently Viewed</li>
							<li>
								<a href="profile.html">
									<i class="fa fa-user text-info"></i>
									<p>Users</p>
								</a>
							</li>
							<li>
								<a href="login.html">
									<i class="fa fa-tasks text-warning"></i>
									<p>Tasks</p>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font text-danger"></i>
									<p>Fonts</p>
								</a>
							</li>
							<li>
								<a href="graphs.html">
									<i class="fa fa-globe text-success"></i>
									<p>Graphs</p>
								</a>
							</li>
							<li>
								<a href="graphs.html">
									<i class="fa fa-bank text-danger"></i>
									<p>Home</p>
								</a>
							</li>
							<li>
								<a href="invoice.html">
									<i class="fa fa-file-text text-success"></i>
									<p>Invoice</p>
								</a>
							</li>
						</ul>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-bell"></i>
						</a>
						<span class="info-label danger-bg animated rubberBand">4</span>
						<ul class="dropdown-menu bounceIn animated messages">
							<li class="plain">
								Messages
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user4.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-danger">Wilson</strong>
									<span>Uploaded 28 new files yesterday.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user1.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-danger">Adams</strong>
									<span>Got 12 new messages.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user3.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-info">Sam</strong>
									<span>Uploaded new project files today.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user5.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-info">Jennifer</strong>
									<span>128 new purchases last 3 hours.</span>
								</div>
							</li>
						</ul>
					</li>
					<li class="list-box user-profile hidden-xs">
						<a href="login.html" class="user-avtar animated rubberBand">
							<img src="img/user4.jpg" alt="user avatar">
						</a>
					</li>
				</ul>
			</div>
			<!-- Mini right nav ends -->

		</header>
		<!-- Header ends -->

		<!-- Left sidebar starts -->
		<aside id="sidebar">

			<!-- Current User Starts -->
			<div class="current-user">
				<div class="user-avatar animated rubberBand">
					<img src="img/user4.jpg" alt="Current User">
					<span class="busy"></span>
				</div>
				<div class="user-name">Welcome Mr. Lu</div>
				<ul class="user-links">
					<li>
						<a href="profile.html">
							<i class="fa fa-user text-success"></i>
						</a>
					</li>
					<li>
						<a href="invoice.html">
							<i class="fa fa-file-pdf-o text-warning"></i>
						</a>
					</li>
					<li>
						<a href="components.html">
							<i class="fa fa-sliders text-info"></i>
						</a>
					</li>
					<li>
						<a href="login.html">
							<i class="fa fa-sign-out text-danger"></i>
						</a>
					</li>
				</ul>
			</div>
			<!-- Current User Ends -->

			<!-- Menu start -->
			<div id='menu'>
                <ul>
                    <li>
                        <a href='index.html'>
                            <i class="fa fa-desktop"></i>
                            <span>仪表盘</span>
                        </a>
                    </li>
                    <li>
                        <a href='team-members.html'>
                            <i class="fa fa-user"></i> 
                            <span>团员管理</span>
                        </a>
                    </li>
                    <li>
                        <a href='new-group.html'>
                            <i class="fa fa-flask"></i> 
                            <span>新建团队</span>
                        </a>
                    </li>
                    <li class="highlight">
                        <a href='groups.html'>
                            <i class="fa fa-calendar"></i> 
                            <span>团队管理</span>
                            <span class="current-page"></span>
                        </a>
                    </li>
                    <li>
                        <a href='work-members.html'>
                            <i class="fa fa-github-alt"></i> 
                            <span>员工管理</span>
                        </a>
                    </li>
                    <li>
                        <a href='packages.html'>
                            <i class="fa fa-globe"></i> 
                            <span>套餐管理</span>
                        </a>
                    </li>
                    <li>
                        <a href='routes.html'>
                            <i class="fa fa-arrows-h"></i> 
                            <span>路线管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://182.61.146.234:8069/web?#action=128&model=tour.route&view_type=list&menu_id=96" target="_Blank" style='text-decoration:none;'>
                            <i class="fa fa-pencil fa-fw"></i>
                            <span>报表助手</span>
                        </a>
                    </li>
                </ul>
            </div>
                <!-- Menu End -->

                <div class="modal fade" id="mapInput" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title">
                                    查询城市路线
                                </h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" role="form">

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">城市</label>
                                        <div class="col-sm-9" >
                                            <select class="form-control citys" name="city" id="map_city">
                                                <!-- 从后端取到数据 -->
                                                <!-- 如果不选，默认为武汉 -->
                                                <option value="4" id="defaultOption">请选择城市</option>
                                            </select>
                                        </div>
                                    </div>
        
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>
                                <button type="submit" data-dismiss="modal"  class="btn btn-primary" id="map_city_confirm">
                                    提交
                                </button><span id="tip"> </span>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                <!-- Freebies Starts -->
                <div class="freebies">
                    <!--Sidebar Extras-->
                    <div class="sidebar-addons">
                        <ul class="views">
                            <li>
                                <a href='city.html'>
                                    <i class="fa fa-circle-o text-success"></i>
                                    <div class="details">
                                        <p>城市信息</p>
                                    </div>
                                </a>
                                <!--<span class="label label-success">8</span>-->
                            </li>
                            <li>
                                <a href='sights.html'>
                                    <i class="fa fa-circle-o text-info"></i>
                                    <div class="details">
                                        <p>景点信息</p>
                                    </div>
                                </a>
                                <!--<span class="label label-info">7</span>-->
                            </li>
                            <li>
                                <a href='#' data-toggle="modal" data-target="#mapInput">
                                    <i class="fa fa-circle-o text-danger"></i>
                                    <div class="details">
                                        <p>地图信息</p>
                                    </div>
                                </a>
                                <!--<span class="label label-danger">4</span>-->
                            </li>
                        </ul>
                    </div>
                </div>
			<!-- Freebies Starts -->

		</aside>
		<!-- Left sidebar ends -->

		<!-- Dashboard Wrapper starts -->
		<div class="dashboard-wrapper">

			<!-- Top Bar starts -->
			<div class="top-bar">
				<div class="page-title">
					团队管理
				</div>
				<ul class="stats hidden-xs">
					<li>
						<div class="stats-block hidden-sm hidden-xs">
							<span id="downloads_graph"></span>
						</div>
						<div class="stats-details">
							<!--<h4>$<span id="today_income">580</span> <i class="fa fa-chevron-up up"></i></h4>
							<h5>Today's Income</h5>-->
						</div>
					</li>
					<li>
						<div class="stats-block hidden-sm hidden-xs">
							<span id="users_online_graph"></span>
						</div>
						<div class="stats-details">
							<!--<h4>$<span id="today_expenses">235</span> <i class="fa fa-chevron-down down"></i></h4>
							<h5>Today's Expenses</h5>-->
						</div>
					</li>
				</ul>
			</div>
			<!-- Top Bar ends -->

			<!-- Main Container starts -->
			<div class="main-container">

				<!-- Container fluid Starts -->
				<div class="container-fluid">

					<!-- Spacer Starts -->
					<div class="spacer">

						<!-- Row start -->
						<div class="row">

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-title" style="height: 50px;">
                                            <h4 style="float:left;">团队管理</h4>
                                            <div class="btn-group col-lg-3 col-lg-offset-8" role="group" aria-label="...">
                                            	<button type="button" class="btn btn-default" id='detail'>详情</button>
                                                <button type="button" class="btn btn-info" id="new_create">新建</button>
                                                <button type="button" class="btn btn-danger" id="delete_group">删除</button>
                                                
                                            </div>
                                    </div>
                                    </div>
                                    <div class="panel-body">
                                        <table id="example" class="cell-border display table" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>索引</th>
                                                    <th>团队id</th>
                                                    <th>团队名</th>
                                                    <th>负责人</th>
                                                    <th>出发时间</th>
                                                    <th>出发地点</th>
                                                    <th>目的城市</th>
                                                    <th>套餐</th>
                                                    <th>人员数量</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>

						</div>
						<!-- Row end -->

					</div>
					<!-- Spacer Ends -->

				</div>
				<!-- Container fluid ends -->

			</div>
			<!-- Main Container ends -->

			<!-- Right sidebar starts -->
			<div class="right-sidebar">

				<!-- Addons starts -->
				<div class="add-on clearfix">
					<div class="add-on-wrapper">
						<h5>Workers</h5>
						<ul class="blog-gallery clearfix">
							<li>
								<img src="img/user1.jpg" alt="User">
							</li>
							<li>
								<img src="img/user2.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user4.jpg" alt="User">
							</li>
							<li>
								<img src="img/user5.jpg" alt="User">
							</li>
							<li>
								<img src="img/user6.jpg" alt="User">
							</li>
							<li>
								<img src="img/user7.jpg" alt="User">
							</li>
							<li>
								<img src="img/user8.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user9.jpg" alt="User">
							</li>
						</ul>
					</div>
				</div>
				<!-- Addons ends -->
			</div>
			<!-- Right sidebar ends -->

			<!-- Footer starts -->
			<footer>
				Copyright Everest Ruiyi 2019.
			</footer>
			<!-- Footer ends -->
			<!-- Footer ends -->

		</div>
		<!-- Dashboard Wrapper ends -->
		
		<!-- 添加弹出表单 -->
		<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            修改用户信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 control-label" >学号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="user_id" name="user_id" value=""
                                           placeholder="请输入用户ID">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user_name" class="col-sm-3 control-label">姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="user_name" value="" id="user_name"
                                           placeholder="用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="user_age" class="col-sm-3 control-label">年龄</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="user_age" value="" id="user_age"
                                           placeholder="年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="user_major" class="col-sm-3 control-label">专业</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="user_major" value="" id="user_major"
                                           placeholder="专业">
                                </div>
                            </div>
                            <!--<div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">备注</label>
                                <div class="col-sm-9">
                                    <textarea  class="form-control"  name="remark" value="{remark}" id="remark"
                                           placeholder="备注">

                                    </textarea>
                                </div>
                            </div>-->
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" class="btn btn-primary" id="submit">
                            提交
                        </button><span id="tip"> </span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>


		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.js"></script>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Sparkline graphs -->
		<script src="js/sparkline.js"></script>

		<!-- jquery ScrollUp JS -->
        <script src="js/scrollup//jquery.scrollUp.js"></script>

        <script src="js/jquery.dataTables.min.js"></script>
        <script src="js/tables.js"></script>

		<!-- Custom Index -->
        <script src="js/custom.js"></script>
        <!-- Moment -->
        <script src="js/moment.min.js"></script>
        <script type="text/javascript">
        	var detail_button = document.getElementById('detail');
        	var group_id = null;

            var citys = $('.citys');
                $.ajax({
                    url: webPath+"city/list",
                    type: "get",
                    success: function(res){
                        result = res.data;
                        for(var i=0; i<result.length; i++){
                            var option = document.createElement('option');
                            option.setAttribute("value",result[i].id);
                            option.innerText = result[i].name;
                            $('.citys').append(option);
                        }

                    },
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });

            $('#map_city_confirm').click(function(){
                var cityId = $('#map_city').val()
                // console.log('./map.html?cityId=' + cityId);
                window.location.href = './map.html?cityId=' + cityId;
            });

        	detail_button.onclick = function(event){
        		var example = document.getElementById('example');
        		var person = example.children[1];
        		for(var i=0; i<person.children.length; i++){
        			child = person.children[i];
					if(child.classList.contains("selected")){
						group_id = child.children[1].innerText;
					}
        		}
        		if(group_id == null){
        			alert("请选择查看的团队！");
        		} else{
        			// 获取url
	        		var url = window.location.href;
//	        		url = url.split('/');
//	        		url = url[0]+"//"+url[2]+"/";
					url = url.slice(0,-11);
	        		url = url+'groupDetail.html?id='+group_id;
//					url = encodeURI(url);
	        		window.open(url, "_self", "");
        		}

        	}
        	
        	var new_create = document.getElementById('new_create');
        	new_create.onclick = function(event){
        		var url = window.location.href;
//	        		url = url.split('/');
//	        		url = url[0]+"//"+url[2]+"/";
					url = url.slice(0,-11);
	        		url = url+'new-group.html';
					url = encodeURI(url);
	        		window.open(url, "_self", "");
        	}
        	
   			var delete_group_id = null;
        	var delete_group = document.getElementById('delete_group');
        	delete_group.onclick = function(event){
        		var example = document.getElementById('example');
        		var person = example.children[1];
        		for(var i=0; i<person.children.length; i++){
        			child = person.children[i];
					if(child.classList.contains("selected")){
						delete_group_id = child.children[1].innerText;
					}
        		}
        		if(delete_group_id == null){
        			alert("请选择将删除的团队！");
        		} else{
        			var deleteFlag = confirm("确定删除吗？");
        			if(deleteFlag == true){
        				$.ajax({
		                   url: webPath+"tourgroup/delete",
		                   type: "post",
		                   data: "id="+delete_group_id,
		                   success: function(result){
                                if(result.code == 0) {
                                    table.rows('.selected').remove().draw( false );
                                } else {
                                    alert('删除失败！服务器繁忙');
                                }
								// alert("成功删除");
//								console.log(delete_group_id);
								// location.reload();
		                   },
		                   error: function (xhr) {
		                       alert(xhr.status);
		                   }
		               });
        			}
        		}
        	}
        	
        	
        	
        	
        	
                var config = {
                    "ajax": {
                        url: webPath + 'tourgroup/list',
                        dataSrc: 'data',
                        type: 'GET'
                    },
                    "columns":[
                        {
                            "data": null,
                            "width": "40px"
                        },{
                            "data": "id",
//                          "visible": false
                        },{
                            "data": "name",
                        },{
                            "data": "worker",
                            "render": function (data, type, row, meta) {
                                return data.name;
                            }
                        },{
                            "data": "start_date",
                            "render": function (data, type, row, meta) {
                                return data.slice(0,11);
                            }
                        },{
                            "data": "start_place"
                        },{
                            "data": "city",
                            "render": function (data, type, row, meta) {
                                return data.name;
                            }
                        }, {
                            "data": "route_package",
                            "render": function (data, type, row, meta) {
                                return data.name;
                            }
                        },{
                        	"data": "member_num"
                        }
                    ]
                };
                var table = init_table(config);	
                set_align(0, 'center')
                set_align(1, 'center')
		</script>
	</body>
</html>